<!DOCTYPE html>
<html>
    <head>
        <title>$ $ $</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    
        <script src="../node_modules/_vue@2.6.14@vue/dist/vue.min.js"></script>
    </head>
    <body>
         <div id="box">
            <h1 @click="fun()" >{{text}}</h1>
            <input type="text" v-model="text" v-show="bool">
         </div>
    </body>

     <script>
         new Vue({
             el:"#box",
             data:{
                //  需要把data的数据修改成初始值

                // 函数中使用data数据必须使用this.变量名
                 text:"我是谁",
                 bool:true
             },
             methods:{
                 fun(){
                    //  点击之后让控制显示和隐藏的变量进行取反操作
                     this.text="我是谁",
                      this.bool =!this.bool
                 }
             }
         })
     </script>
</html>